<template>
   <div class="header">
       <!-- 左侧返回按钮 -->
       <div class="back" @click="goBack">
           <i class="iconfont iconiconset0419"></i>
       </div>
       <!-- 中间页面标题 -->
       <div class="mine-title">
           我的账户
       </div>
       <!-- 汉堡包按钮（显示二级菜单） -->
       <div class="home-logo" @click="changeStatus"> 
           <i class="iconfont iconhanbaobao"></i>
           <div class="list" v-show="status">
               <!-- 三角形 -->
               <div class="sjx"></div>
               <ul>
                   <router-link :to="{path:item.pagePath}" tag="li" v-for="item in pageList" :key="item.title">
                       <i v-bind:class="item.icon"></i>
                       {{item.title}}
                   </router-link>
               </ul>
           </div>
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               status:false,
               pageList:[
                   {title:'首页',pagePath:'/home',icon:'iconfont iconshouye'},
                   {title:'我的',pagePath:'/mine',icon:'iconfont iconicon-test'},
                   {title:'搜索',pagePath:'/search',icon:'iconfont iconmagnifier'}
               ]
           }
       },
       methods: {
           goBack(){
               this.$router.go(-1)
           },
           changeStatus(){
               this.status = !this.status
           }
       }
   }
</script>
   
<style scoped lang="less">
    .header{
        height: 1.346667rem;
        background: #FFD000;
        display: flex;
        .back{
            width: 1.4rem;
            height: 1.346667rem;
            text-align: center;
            line-height: 1.346667rem;
            i{
                font-size: .666667rem;
            }
        }
        .mine-title{
            flex: 1;
            text-align: center;
            line-height: 1.346667rem;
            font-size: .48rem;
        }
        .home-logo{
            width: 1.4rem;
            height: 1.346667rem;
            text-align: center;
            line-height: 1.346667rem;
            position: relative;/**给父级元素添加相对定位 */
            i{
                font-size: .666667rem;
            }
            .list{
                height: 3.32rem;
                width: 2.666667rem;
                background: white;
                // 给子元素添加绝对定位
                position: absolute;
                top: 1.346667rem;
                right: 0;
                border-bottom-left-radius: .24rem;
                box-shadow: 0 0.12rem 0.6rem 0 rgba(196,196,196,0.60);
                .sjx{
                    width: 0px;
                    height: 0px;
                    border-width: .24rem;
                    border-style: solid;
                    /*颜色设置*/
                    border-top-color: transparent;
                    border-right-color: transparent;
                    border-bottom-color: white;
                    border-left-color: transparent;
                    /*定位*/
                    position: absolute;
                    top: -.48rem;
                    right: .44rem;
                }
                ul{
                    
                    li{
                        list-style: none;
                        height: 1.106667rem;
                        line-height: 1.106667rem;
                        font-size: .4rem;
                        i{
                            font-size: .64rem;
                            vertical-align: bottom;/**标记项垂直方向对齐方式 */
                        }
                    }
                }
            }
        }
    }
</style>